<template>
	<view class="details">
		<!-- <view class="content">
			<image :src="details.image" mode="aspectFit">
			</image>
		</view> -->
		<!-- 图片解锁 -->
		<view v-if="details.type == 1" class="picture">
			<swiper class="swiper" circular indicator-dots indicator-color="#C1C1C1" indicator-active-color="#545454">
				<!-- #ifndef H5 -->
				<swiper-item v-for="(v,i) in details.content" :key="i" @longtap="longpress(v)">
					<image :src="v" mode="aspectFit"></image>
				</swiper-item>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<swiper-item v-for="(v,i) in details.content" :key="i">
					<image :src="v" mode="aspectFit"></image>
				</swiper-item>
				<!-- #endif -->
			</swiper>
			<!-- 			<image class="download" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/download.png"
				mode="scaleToFill" @click="download"></image> -->
		</view>
		<!-- 视频解锁 -->
		<view v-else-if="details.type == 2" class="videoUrl">
			<video :src="details.content[0]" :show-menu-by-longpress="true"></video>
		</view>
		<!-- 地图解锁 -->
		<view v-else-if="details.type == 3" class="plat">
			<map id="myMap" class="map" :latitude="details.latitude" :longitude="details.longitude" :scale="14"
				:enable-scroll="false" :enable-zoom="false" :show-location="true"></map>
		</view>
		<!-- 文本文案 -->
		<view v-if="details.type == 1 || details.type == 2" class="msg">
			<view class="desc">
				{{details.desc}}
			</view>
			<view class="category">
				🏷️#{{details.category_id | categoryHandle}}
			</view>
		</view>
		<view class="box-msg">
			<!-- <view class="title">
				{{details.title}}
			</view> -->
			<view class="info">
				<view class="left">
					<image :src="user.avatar" mode="scaleToFill"></image>
					<text>{{user.nickname}}</text>
				</view>
				<view class="right" @click="copyll">
					<text>口令：{{details.id}}</text>
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon7.png"
						mode="scaleToFill"></image>
				</view>
			</view>
			<view class="statistics">
				<view class="sum">
					<view class="left">
						解锁统计：{{details.reward_count}}
					</view>
					<view class="right">
						解锁收益：<text>￥{{details.reward_money}}元</text>
					</view>
				</view>
				<view v-if="incomeLits.length" class="list">
					<view class="item" v-for="(v,i) in incomeLits" :key="i">
						<view class="time">
							解锁统计：{{v.date}}
						</view>
						<view class="money">
							解锁收益:<text>￥{{v.total_money}}元</text>
						</view>
					</view>
				</view>
			</view>

			<view v-if="details.status == 2" class="check_message">
				审核失败原因：{{details.check_message}}
			</view>

			<view class="btn">
				<view class="left" @click="deleteWork">
					删除
				</view>
				<view class="right" @click="navigateTo(`/pages/works/addWorks?worksId=${id}`)">
					编辑
				</view>
			</view>
			<!-- #ifdef MP-TOUTIAO -->
			<button class="btn1" style="margin: 0;" open-type="uploadDouyinVideo" id="1"
				data-hello="world">拍抖音,去赚钱</button>
			<!-- #endif -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				user: uni.getStorageSync("user"),
				details: {},
				incomeLits: [],
				total: 0
			}
		},
		filters: {
			categoryHandle(data) {
				let list = uni.getStorageSync('category')
				if (!data) return
				let res = list.filter(v => {
					return v.id == data
				})
				return res[0].title
			}
		},
		onLoad(options) {
			// console.log(options);
			this.id = options.id
			this.myWorkInfo()
			this.workAdRecords()
		},
		methods: {
			// 删除笔记
			deleteWork() {
				uni.showModal({
					title: '温馨提示',
					content: '确定删除该条笔记吗',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$http("api/userWork/deleteWork", {
								id: this.id
							})
							// console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: "删除成功",
									icon: 'none',
								})
								setTimeout(() => {
									getApp().globalData.WorkList = []
									this.navigateBack()
								}, 1500);
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			//用户笔记详情
			async myWorkInfo() {
				let res = await this.$http("api/userWork/myWorkInfo", {
					id: this.id
				}, "GET")
				if (res.code == 200) {
					res.result.content = res.result.content.split(",")
					this.details = res.result
					
					uni.setNavigationBarTitle({
						title: res.result.title
					});

					let data = getApp().globalData.WorkList.filter(v => {
						if (v.id == res.result.id) {
							return res.result
						}
					})
					if (!data.length) {
						getApp().globalData.WorkList.unshift(res.result)
					}
				}
			},
			//广告收益列表
			async workAdRecords() {
				let res = await this.$http("api/userWork/workAdRecords", {
					id: this.id, //true	string		用户笔记id
					page: 1, //true	int		当前页
					size: 100, //true	int		每页多少条
				}, "GET")
				// console.log(res);
				this.incomeLits = this.incomeLits.concat(res.result.data)
				this.total = res.result.total
			},
			// 复制口令
			copyll() {
				uni.setClipboardData({
					data: this.id,
					success: () => {

					},
					fail: (err) => {
						// console.log(err);
					}
				});
			},
			chooseVideo() {
				return new Promise((resolve) => {
					tt.chooseVideo({
						sourceType: ["album", "camera"],
						compressed: false,
						maxDuration: 180,
						success: (res) => {
							// console.log("数据", res);
							resolve(res.tempFilePath);
						},
						fail: (err) => {
							let errType = err.errMsg.includes("chooseVideo:fail cancel") ?
								"取消选择" :
								"选择失败";
							tt.showModal({
								title: errType,
								content: err.errMsg,
								showCancel: false,
							});
							resolve("");
						},
					});
				});
			},
			// 上传抖音笔记id
			async upDyVideo(videoId) {
				let res = await this.$http("api/userWork/upDyVideo", {
					id: this.id, //true	string		笔记id
					dy_video_id: videoId, //true	string		抖音笔记id
				})
				console.log(res);
			}
		},

		async onUploadDouyinVideo(uploadOptions) {
			// console.log("回调：", uploadOptions);
			const videoPath = await this.chooseVideo();
			// console.log("videoPath:", videoPath);
			return {
				videoPath,
				stickersConfig: {
					text: [{
						text: `搜嫦月小程序,
						输入口令：${this.id}`,
						color: "#ffffff",
						fontSize: 12,
						scale: 1,
						x: 0.6,
						y: 0.8,
					}, ],
				},
				// taskIds: [`task_7450021068502211367`],
				extra: {
					anchor: {
						anchorType: "app",
						// title: "测试标题",
						path: "page/index/index",
					},
				},
				success: (callback) => {
					// 只有当发布成功且挂载成功时，success callback 才会有 videoId
					console.log("success: ", callback);
					uni.showToast({
						title: "发布成功",
						icon: 'none',
					})
					this.upDyVideo(callback.videoId)
				},
				fail: (callback) => {
					console.log("fail: ", callback);
				},
				complete: (callback) => {
					console.log("complete: ", callback);
				},
			};
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		// .content {
		// 	width: 100vw;
		// 	height: 70vh;
		// 	text-align: center;

		// 	image {
		// 		display: block;
		// 		width: 100%;
		// 		height: 100%;
		// 	}
		// }
		
		.picture {
			width: 100vw;
			// height: 100vh;
			background-color: #fff;
			padding-bottom: 40rpx;
			box-sizing: border-box;
			position: relative;
		
			.swiper {
				width: 100%;
				height: 60vh;
				// height: 1084rpx;
		
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		
			.download {
				position: absolute;
				top: 50rpx;
				right: 50rpx;
				width: 60rpx;
				height: 60rpx;
				background-color: #000;
				border-radius: 50%;
			}
		}
		
		.videoUrl {
			video {
				display: block;
				width: 100vw;
				// height: 100vh;
				height: 60vh;
			}
		}
		
		.plat {
			.map {
				width: 100vw;
				height: 60vh;
			}
		}
		
		.msg {
			padding: 0 32rpx;
			background-color: #fff;
		
			.user {
				display: flex;
				align-items: center;
				// justify-content: flex-end;
				padding: 24rpx 0;
		
				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
		
				text {
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
					padding-left: 12rpx;
				}
			}
		
			.desc {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				line-height: 42rpx;
				letter-spacing: 2rpx;
				padding: 20rpx 0;
			}
		
			.category {
				font-weight: bold;
				font-size: 28rpx;
				color: #FF504A;
				letter-spacing: 2rpx;
				// padding: 24rpx 0;
			}
		}

		.box-msg {
			padding: 20rpx 32rpx 100rpx;
			background-color: #FFFFFF;

			.title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				letter-spacing: 2rpx;
			}

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 0;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
					}

					text {
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
						padding: 0 8rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;

					text {
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						padding: 0 8rpx;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.statistics {
				.sum {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
					}

					.right {
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;

						text {
							color: #FF504A;
							font-weight: bold;
						}
					}
				}

				.list {
					width: 686rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #8D8F90;
					padding: 10rpx 16rpx;
					box-sizing: border-box;
					margin-top: 16rpx;

					.item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 6rpx 0;

						.time {
							font-weight: 500;
							font-size: 20rpx;
							color: #333333;
						}

						.money {
							font-weight: 500;
							font-size: 20rpx;
							color: #333333;

							text {
								color: #FF504A;
								font-weight: bold;
							}
						}
					}
				}
			}

			.check_message {
				padding: 30rpx 0;
				color: #f9ae3d;
				font-size: 25rpx;
				font-weight: 700;
			}

			.btn {
				display: flex;
				justify-content: space-between;
				padding: 24rpx 0 24rpx 0;

				.left {
					width: 296rpx;
					height: 72rpx;
					line-height: 72rpx;
					border-radius: 12rpx;
					border: 2rpx solid #333333;
					box-sizing: border-box;
					text-align: center;
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
				}

				.right {
					width: 296rpx;
					height: 72rpx;
					line-height: 72rpx;
					// background: #333333;
					border: 2rpx solid #333333;
					border-radius: 12rpx;
					text-align: center;
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
				}
			}
			
			.btn1{
				height: 72rpx;
				line-height: 72rpx;
				background: #333333;
				border-radius: 12rpx;
				text-align: center;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
</style>